<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选/反选</title>
<style>

</style>
</head>
<body>
	<input type="checkbox" id="unall">反选
<input type="checkbox" id="all">全选
<ul id="enjoys">

	<li><input type="checkbox" value="电影">电影</li>
	<li><input type="checkbox" value="游戏">游戏</li>
	<li><input type="checkbox" value="小说">小说</li>
	<li><input type="checkbox" value="音乐">音乐</li>
</ul>
<script>
//管理系统，批量删除
/*
全选checkbox：勾选的时候  多有的checkbox均选中取消勾选  所有的checkbox
均取消勾选所有的checkbox均取消勾选，数组为空

被控制的一组checkbox：勾选时，如果其他的checkbox也处于勾选状态，将全选的checkbox选中
取消勾选的时候，将全选的checkbox取消选中
添加value进数组（前提是数组里不存在该元素）

取消勾选时，将全选的checkbox取消勾选
对应删除数组中的元素（数组.splice（该元素的索引,1））

取值：定义了空数组，作为添加checkbox的value使用


 */
function $(s){
	return document.querySelectorAll(s);
}
var all=$("#all")[0],
enjoys=$("#enjoys")[0],
enjoylist=$("#enjoys input[type=checkbox]"),enjoyArr=[],unall = $("#unall")[0]
//js设置checkbox是否选中？
all.onclick=function(){
	for(var i=0;i<enjoylist.length;i++){
		if(!enjoylist[i].checked){
			enjoylist[i].click();//执行click
		}
		enjoylist[i].checked=this.checked;//是否全部勾选
	}
}
unall.onclick = function(){
	for (var i = 0; i < enjoylist.length; i++) {
		enjoylist[i].checked = !enjoylist[i].checked;
	}
}
enjoys.onclick=function(e){
	if(e.target.type=="checkbox"){
		//检测点击对象是不是checkbox
		//e.target.checked=!e.target.checked;
		var value=e.target.value;
		if(e.target.checked){
			if(enjoyArr.indexOf(value)==-1){
				enjoyArr.push(value);
			}
			if(enjoyArr.length==enjoylist.length){
				//数组长度是否与checkbox数量一致
				all.checked=true;
			}
		}else{//数组里删除指定元素
			all.checked=false;//只要有一个未选中，all即不选中
			enjoyArr.splice(enjoyArr.indexOf(value),1)
		}
	}
}
</script>	
</body>
</html>